.prose {
    max-width: auto !important;
}
.prose pre:not(.shiki) {
  padding: 0;
}

.prose .shiki {
  font-family: 'DM Mono', monospace;
  font-size: 1.2em;
  line-height: 1.4;
}

.prose img {
  width: 100%;
}

.shiki-light {
  background: rgba($color: #001A4D, $alpha: 1) !important;
}
.shiki-dark {
  background: #1a1a1a !important;
}

html.dark .shiki-light {
  display: none;
}

html:not(.dark) .shiki-dark {
  display: none;
}

.prose :not(pre) > code:before, .prose :not(pre) > code:after {
  content: "";
}

.prose :not(pre) > code {
  border-radius: 4px !important;
  padding: 3px 6px !important;
  /* color: #476582 !important; */
  background-color: #f1f1f1 !important;
  transition: color .5s, background-color .5s;
}

.prose pre {
  width: 100%;
}

h2 {
  padding: 24px 0 !important;
  border-top: 1px solid rgba($color: map-get($code-colors, dark-gray), $alpha: .3) !important;
}

html.dark {
  * :not(.arco-link, .arco-link > span) {
    color: rgba($color: map-get($code-colors, light-gray), $alpha: .8);
  }
  h2 {
    border-top: 1px solid rgba($color: map-get($code-colors, dark-gray), $alpha: .3) !important;
  }
  .prose :not(pre) > code {
    background-color: #3A3A3A !important;
  }

  tr:hover {
    background-color: rgba($color: map-get($map: $code-colors, $key: dark-gray), $alpha: .1) !important;
  }
}

p>code {
  color: #00BC79 !important;
}

table {
  // width: 100% !important;
  margin-top: 12px !important;
  color: rgba(map-get($map: $code-colors, $key: black), .7) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  border-collapse: collapse !important;
  // border: 1px solid #eee !important;

  tr {
    width: 100% !important;
  }

  th {
      padding: 8px 20px !important;
      font-weight: 600 !important;
      text-align: center !important;
      border-left: 1px solid #e9e9e9 !important;
      background-color: #f7f8fa !important;
      &:first-child {
        border-left: none !important;
      }

      &:last-child {
          // width: 100%;
          padding-right: 0 !important;
      }
  }

  tr:hover {
    background-color: map-get($map: $code-colors, $key: light-gray) !important;
  }

  td {
      width: 1000px;
      text-align: center;
      padding: 8px 20px !important;
      border-top: 1px solid map-get($map: $code-colors, $key: light-gray) !important;
      border-left: 1px solid #e9e9e9 !important;

      &:first-child {
          // padding-left: 0;
          border-left: 0px !important;

          // version tag
          code {
              margin: 0 !important;
              padding: 2px 6px !important;
              color: map-get($map: $code-colors, $key: green) !important;
              font-weight: 600 !important;
              font-size: 11px !important;
              background-color: fade(#1989fa, 10%) !important;
              border-radius: 20px !important;
          }
      }

      &:last-child {
          // width: 100% !important;
          padding-right: 0;
      }
      code {
        color: map-get($map: $code-colors, $key: green) !important;
      }
  }

  em {
      color: #fa2400 !important;
      font-size: 14px !important;
      font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
      font-style: normal;
      -webkit-font-smoothing: auto;
  }
}

table code {
  display: inline !important;
  margin: 0 2px !important;
  padding: 2px 5px !important;
  font-size: 14px;
  font-family: inherit;
  word-break: keep-all;
  background-color: map-get($map: $code-colors, $key: light-gray) !important;
  border-radius: 4px !important;
  -webkit-font-smoothing: antialiased !important;
}

html.dark {
  table {
    th {
      background-color: #1A1A1A !important;
      border-color: rgba($color: map-get($code-colors, dark-gray), $alpha: .3) !important;
    }
    td {
      border-color: rgba($color: map-get($code-colors, dark-gray), $alpha: .3) !important;
    }
  }
}
